<!DOCTYPE html>
<html>
  <head>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <title>Universal Viewer Examples</title>
    <link rel="icon" href="uv/favicon.ico" />
    <script
      type="text/javascript"
      src="https://unpkg.com/jquery@1.11.2/dist/jquery.min.js"
    ></script>
    <script
      type="text/javascript"
      src="https://unpkg.com/@edsilv/utils@1.0.2/dist-umd/utils.js"
    ></script>
    <style>
      body {
        margin: 0px;
        padding: 20px;
      }

      #options {
        padding: 20px 0 0 0;
      }

      #manifestSelect {
				width: 100%;
				margin-bottom: 10px;
      }
    </style>
  </head>
  <body>
    <div id="options">
      <select id="manifestSelect"></select>
      <input id="manifest" type="text" value="" />
      <a id="setManifestButton" class="button" href="#">Set</a>
    </div>

    <script type="text/javascript">
      var manifest;

      // load manifests
      $.getJSON("collection.json", function(manifests) {
        var $manifestSelect = $("#manifestSelect");

        for (var i = 0; i < manifests.collections.length; i++) {
          var collection = manifests.collections[i];

          if (collection.visible === false) {
            continue;
          }

          $manifestSelect.append('<optgroup label="' + collection.label + '">');

          for (var j = 0; j < collection.manifests.length; j++) {
            var manifest = collection.manifests[j];

            if (manifest.visible !== false) {
              $manifestSelect.append(
                '<option value="' +
                  manifest["@id"] +
                  '">' +
                  manifest.label +
                  "</option>"
              );
            }
          }

          $manifestSelect.append("</optgroup>");
        }

        setSelectedManifest();
      });

      function setSelectedManifest() {
        manifest = utils.Urls.getHashParameter("manifest");

        if (manifest) {
          $("#manifestSelect").val(manifest);
        } else {
          var options = $("#manifestSelect option");

          if (options.length) {
            manifest = options[0].value;
          }
        }

        $("#manifest").val(manifest);
      }

      $("#manifestSelect").on("change", function() {
        $("#manifest").val($("#manifestSelect option:selected").val());
      });

      $("#setManifestButton").on("click", function() {
        manifest = $("#manifest").val();
        document.location.href =
          "uv.html#?manifest=" + manifest + "&locales=en-GB";
      });
    </script>
  </body>
</html>
